<%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
  <div data-polaris-popover-target="activator">
    <% if activator.present? %>
      <%= activator %>
    <% elsif button.present? %>
      <%= button %>
    <% end %>
  </div>

  <% popover = capture do %>
    <%= render Polaris::BaseComponent.new(**system_arguments) do %>
      <%= render Polaris::BaseComponent.new(**popover_arguments) do %>
        <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
        <div class="Polaris-Popover__ContentContainer">
          <%= render Polaris::BaseComponent.new(**content_arguments) do %>
            <% if panes.present? %>
              <% panes.each do |pane| %>
                <%= pane %>
              <% end %>
            <% else %>
              <%= render Polaris::Popover::PaneComponent.new(
                sectioned: @sectioned,
                scrollable_shadow: @scrollable_shadow
              ) do %>
                <%= content %>
              <% end %>
            <% end %>
          <% end %>
        </div>
        <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
      <% end %>
    <% end %>
  <% end %>

  <% if @append_to_body %>
    <template data-polaris-popover-target="template">
      <%= popover %>
    </template>
  <% else %>
    <%= popover %>
  <% end %>
<% end %>
